import {PlusOutlined} from '@ant-design/icons';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message, Tooltip, Radio} from 'antd';
import type {RadioChangeEvent} from 'antd';
import React, {useState} from "react";
import {ProFormFieldSet} from "@ant-design/pro-form";

interface Project {
  companyJia: string,
  companyYi: string,
  contract: string,
  contractTime: [string, string],
  department: string,
  mangerName: string,
  projectName: string,
  projectType: string,
  isSupervise: string
}

const CreateProject = (props: any) => {

  const [form] = Form.useForm<Project>();
  const [value, setValue] = useState(1);

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, time);
    });
  };

  // 添加自定义校验规则
  const validateCompanyName_Jia = (rule: any, value: string) => {
    if (!value || value.length === 0) {
      return Promise.reject(new Error('甲方公司名称不能为空'));
    }
    return Promise.resolve();
  };

  const validateCompanyName_Yi = (rule: any, value: string) => {
    if (!value || value.length === 0) {
      return Promise.reject(new Error('乙方公司名称不能为空'));
    }
    return Promise.resolve();
  };

  const validateProjectName = (rule: any, value: string) => {
    if (!value || value.length === 0) {
      return Promise.reject(new Error('项目名称不能为空'));
    }
    return Promise.resolve();
  };

  const validateContractNum = (rule: any, value: string) => {
    if (!value || value.length === 0) {
      return Promise.reject(new Error('合同编号不能为空'));
    }
    // 这里可以根据实际需求添加其他合法性校验逻辑
    return Promise.resolve();
  };

  const commitForm = (newProject: Project, value: any) => {
    newProject.isSupervise = value === 1 ? 'yes' : 'no'
    props.createProject(newProject);
  }

  return (
    <ModalForm<Project>
      width={900}
      title="创建项目"
      trigger={
        <Tooltip placement="bottom" title="创建新项目" color={"cyan"}>
          <a type="primary" style={{color: '#9fb3c8', display: 'inline-block'}}>
            <PlusOutlined style={{fontSize: '80px'}}/>
          </a>
        </Tooltip>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('取消创建'),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        await waitTime(2000);
        commitForm(values, value);
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="companyJia"
          key="companyJia"
          label="甲方公司名称"
          tooltip="最长为 24 位"
          placeholder="请输入名称"
          rules={[
            {
              required: true,
              validator: validateCompanyName_Jia,
            },
          ]}
        />

        <ProFormText
          width="md"
          name="companyYi"
          key="companyYi"
          label="乙方公司名称"
          placeholder="请输入名称"
          rules={[
            {
              required: true,
              validator: validateCompanyName_Yi,
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width="md"
          name="contract"
          key="contract"
          label="合同编号"
          placeholder="请输入编号"
          rules={[
            {
              required: true,
              validator: validateContractNum,
            },
          ]}
        />
        <ProFormDateRangePicker
          name="contractTime"
          key="contractTime"
          label="合同生效时间"
          rules={[
            {
              required: true,
              message: '请选择合同生效时间',
            },
          ]}
        />
      </ProForm.Group>

      <ProFormText width="sm"
                   name="projectName"
                   key="projectName"
                   label="项目名称"
                   rules={[
                     {
                       required: true,
                       validator: validateProjectName,
                     },
                   ]}
      />
      <ProFormSelect
        id={"select_2"}
        request={async () => [
          {
            value: 'IPO',
            label: 'IPO'
          },
          {
            value: '资产重组',
            label: '资产重组'
          },
          {
            value: '上市公司年审',
            label: '上市公司年审'
          },
          {
            value: '发债',
            label: '发债'
          }
        ]}
        width="sm"
        name="projectType" // 注意这个name和下面<ProFormSelect/>中的name不能一样，否则会同步更新
        key="projectType"
        label="项目种类"
      />
      {/*在Ant Design Pro的ProForm组件库中，name属性通常用于表单字段标识和数据绑定，这意味着具有相同name属性的表单控件会共享并同步同一份数据。*/}
      <ProFormText label={"是否监盘"}>
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={1}>是</Radio>
          <Radio value={2}>否</Radio>
        </Radio.Group>
      </ProFormText>

      <ProForm.Group>
        <ProFormSelect
          id={"select_1"}
          request={async () => [
            {
              value: '数字研发中心',
              label: '数字研发中心'
            },
            {
              value: '四总一部',
              label: '四总一部'
            },
            {
              value: '六总一部',
              label: '六总一部'
            },
            {
              value: '六总二部',
              label: '六总二部'
            },
            {
              value: '七总四部',
              label: '七总四部'
            },
            {
              value: '七总六部',
              label: '七总六部'
            },
            {
              value: '运维部门',
              label: '运维部门'
            }
          ]}
          width="sm"
          name="department"
          key="department"
          label="创建人所属部门"
        />
        <ProFormText
          width="xs"
          name="mangerName"
          key="mangerName"
          disabled
          label="创建人"
          initialValue="Kafka"
        />
      </ProForm.Group>

    </ModalForm>
  );
};

export default CreateProject;
